<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function lianjie() {
      if ("WebSocket" in window) {
        //alert("您的浏览器支持 WebSocket!");

        // 打开一个 web socket
        var value = document.getElementById("name").value;
        ws = new WebSocket("ws://"+location.host+"/websocket/" + value);

        ws.onopen = function () {
          // Web Socket 已连接上，使用 send() 方法发送数据
          // ws.send("发送数据");
          //  alert("数据发送中...");
          fillData("建立连接成功")
        };

        ws.onmessage = function (evt) {
          var received_msg = evt.data;
          //alert("数据已接收...");
          fillData(received_msg)
        };

        ws.onclose = function () {
          // 关闭 websocket
          //alert("连接已关闭...");
          fillData("连接已关闭")
        };
      } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
      }
    }

    function fillData(data) {
      document.getElementById("content").innerHTML = data;
    }

    function  send(){
      var msg = document.getElementById("msg").value;
      var toUser = document.getElementById("toUser").value;
      //拼接 json 字符串
      var message= '{"toUser":"'+toUser+'","msg":"'+msg+'"}';
      ws.send(message);
    }
  </script>
</head>
<body>

姓名:<input id="name">
<button onclick="lianjie()">连接</button>
<br>
<br>
<br>
<br>
<br>
对方的名字<input id="toUser"><br>
内容<input id="msg"  >
<br>
</input><button onclick="send()">发送</button>
<br>
<br>
<br>
<br>
<br>
<span id="content"></span>
</body>
</html>